<template>
  <div class="mainPage" :style="{backgroundImage: 'url('+backgroundList[bgIndex]+')'}">
    <transition name="el-fade-in-linear">
     <div class="filterOptionBox" v-show="view">
      <div class="filterOptionBox_inpBox">
        <el-form  :model="blogFilter" label-width="60px">
          <el-form-item label="标题">
            <el-input v-model="blogFilter.title"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="blogFilter.intro"></el-input>
          </el-form-item>
          <el-form-item label="用户">
            <el-input v-model="blogFilter.username"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker type="date" placeholder="开始日期" v-model="blogFilter.startDate" style="width: 150px;"></el-date-picker>

            <el-date-picker type="date" placeholder="结束日期" v-model="blogFilter.endDate" style="width: 150px;float: right"></el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-button type="danger" @click="closeView" style="width: 45%">关闭</el-button>
            <el-button type="primary" @click="blogFilterRes" style="width: 45%;float: right" :disabled="!view">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    </transition>
    <div class="top">
      <div class="topBox">
        <i class="webTitle"></i>
        <div class="searchInput">
          <div>
            <input type="text" placeholder="查找标题" v-model="query" @keydown.enter="queryThis" @blur="queryThis">
          </div>
        </div>
        <div class="navigation"></div>
      </div>
    </div>
    <div class="cont">
      <div class="left">
        <div class="mine">
            <div class="userHead" :style="{backgroundImage: 'url('+userInfo.headPicUrl+')'}"></div>
        </div>

        <router-link to="/blog" style="text-decoration: none">
          <div class="leftOption">
            <i class="el-icon-s-home leftOptionIcon"></i>首页
          </div>
        </router-link>

        <div class="leftOption" @click="setView">
          <i class="el-icon-help leftOptionIcon"></i>筛选
        </div>

        <router-link to="/editor" style="text-decoration: none">
          <div class="leftOption">
            <i class="el-icon-document-add leftOptionIcon"></i>发布博客
          </div>
        </router-link>

        <div class="leftOption" @click="toColor">
          <i class="el-icon-orange leftOptionIcon"></i>配色板
        </div>

        <router-link to="/login" style="text-decoration: none">
          <div class="leftOption" v-show="userInfo.uid==0">
              <i class="el-icon-link leftOptionIcon"></i>登陆
          </div>
        </router-link>

        <router-link to="/register" style="text-decoration: none">
          <div class="leftOption" v-show="userInfo.uid==0">
            <i class="el-icon-link leftOptionIcon"></i>注册
          </div>
        </router-link>

        <router-link to="/login" style="text-decoration: none">
          <div class="leftOption" v-show="userInfo.uid!=0">
            <i class="el-icon-user leftOptionIcon"></i>更改账户
          </div>
        </router-link>
        <div class="leftOption" v-show="userInfo.uid!=0" @click="clear">
          <i class="el-icon-switch-button leftOptionIcon"></i>注销
        </div>

        <div class="leftOption" @click="bgIndexAdd">
          <i class="el-icon-refresh leftOptionIcon"></i>换个背景
        </div>
        <div class="leftOption">
          <i class="el-icon-setting leftOptionIcon"></i>管理(未定义)
        </div>



      </div>
      <div class="mid">
        <router-view :cards="cards"></router-view>
      </div>
      <div class="right">
        <MusicBox/>
        <div style="text-align: center">
          <div class="rightMiniCard">
            推荐
            <ol>
              <div v-for="item in recommend">
                <router-link  :to="'Md/'+item.mid" style="text-decoration: none">
                  <li>{{ item.title }}</li>
                </router-link>
              </div>
            </ol>
          </div>
        </div>
        <div class= "rightMiniCard">
          <div>
            <span><i class="el-icon-document"></i>文章:</span>
            <span>{{ BlogNum }}</span>
          </div>
          <div>
            <span><i class="el-icon-chat-dot-square"></i>评论:</span>
            <span>{{ CommentNum }}</span>
          </div>
          <div>
            <span><i class="el-icon-time"></i>运行时间:</span>
            <span>{{ServerRunTime}}天</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BlogCard from "../component/BlogCard";
import MusicBox from "../component/MusicBox";
import axios from "axios";
axios.defaults.withCredentials=true //让ajax携带cookie

import $ from "jquery"
export default {
  name: "index",
  components: {
    BlogCard,MusicBox
  },
  data(){
    return{
      cards:[],
      originalCards:[],
      query: "",
      userInfo:{
        uid:0,
        username: "0",
        headPicUrl: "https://www.enwayouli.top/img/whj.png"
      },
      blogFilter: {
        title: "",
        intro: "",
        username: "",
        startDate: null,
        endDate: null
      },
      view: false,
      CommentNum: 0,
      BlogNum: 0,
      ServerRunTime: 0,
      recommend:[],
      backgroundList:[
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg26.51tietu.net%2Fpic%2F2017-010802%2F20170108024916elsnque0ype543163.png&refer=http%3A%2F%2Fimg26.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639010882&t=fa5b3210e5367f5be2f43bbe818975d7",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201507%2F09%2F20150709210145_nETi8.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639102044&t=54ed576d95afbe56047d3839b50d076a",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201705%2F24%2F20170524150702_V4QMv.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638669222&t=7ed3910d2d407f4189087a654fd7c131",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201205%2F22%2F20120522215022_WcGin.jpeg&refer=http%3A%2F%2Fimg4.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639010861&t=67d9aabc7fcdb508f80965e4f4279cf5",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F11%2F20170811200945_vhTAE.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639102098&t=2f240e3e9bdc24a889feb967a7090867",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F16%2F20141016093336_LuZvA.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639102139&t=2c9a10ba0cca4b512dfda49b6bbd44f5"
      ],
      bgIndex: 0
    }
  },
  methods:{
    bgIndexAdd(){
      if (this.bgIndex >= 5){
        this.bgIndex=0
        return;
      }
      this.bgIndex++;
    },
    toColor(){
      const n = this.$router.resolve("/color")
      window.open(n.href,'_blank')
    },
    //博客本地查找
    queryThis(){
      let cardsTemp = [];
      let _this = this
      _this.originalCards.forEach(function (item,index){
        if (_this.originalCards[index].title.indexOf(_this.query.trim())>-1){
          cardsTemp.push(item)
        }
      })
      this.cards = cardsTemp
    },
    setView(){
      this.view = true
    },
    closeView(){
      this.view = false
    },
    clear(){
      window.localStorage.removeItem("access-admin")
      location.reload();
    },
    blogFilterRes(){
      let formData = new FormData();
      let _b = this.blogFilter
      formData.append("title",_b.title)
      formData.append("intro",_b.intro)
      formData.append("username",_b.username)
      formData.append("startDate",this.dateFormat(_b.startDate))
      formData.append("title",this.dateFormat(_b.endDate))
      this.$axios({
        url: "/blogFilter",
        method: "post",
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then(res => {
        this.cards = res.data
      })
      this.closeView();
    },
    dateFormat(dateData) {
      let date = new Date(dateData)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      const time = y + '-' + m + '-' + d
      return time
    },
    initStatistics(){
      this.$axios.get("/getBlogNum").then(res => {
        this.BlogNum = res.data
      })
      this.$axios.get("/getCommentNum").then(res => {
        this.CommentNum = res.data
      })
      let createServerDate = new Date(2021,10,10)
      this.ServerRunTime = ((new Date() - createServerDate)/(1*24*60*60*1000)).toFixed(0)
    }
  },
  created() {
    let token = JSON.parse(window.localStorage.getItem("access-admin"))
    if (token!=null){
      this.userInfo = token
    }
    this.$axios.get("/queryAllBlog").then(res => {
      this.cards = res.data
      this.originalCards = this.cards
    })

    this.$axios.get("/getTop5Blog").then(res => {
      this.recommend = res.data
    })

    this.initStatistics()
    console.log("不要温和地走进那个良夜")
  }
}
</script>

<style scoped>
.mainPage{
  width: 100%;
  height: 100%;
  /*background-image: url("http://www.enwayouli.top/img/whj.png");*/
  background-color: white;
  background-size: cover;
}
.mine{
  height: 100px;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg26.51tietu.net%2Fpic%2F2017-010802%2F20170108024916elsnque0ype543163.png&refer=http%3A%2F%2Fimg26.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639010882&t=fa5b3210e5367f5be2f43bbe818975d7");
  /*background-image: url("");*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 50px;
}
.leftOptionIcon{
  font-size: 18px;
  margin-left: 30px;
  margin-right: 15px;
}
.leftOption{
  height: 35px;
  font-size: 14px;
  line-height: 35px;
  color: #5C657E;
  margin: 3px 0 3px 0;
}
.leftOption:hover{
  color: #303133;
  background-color: lightgray;
}
.closeBtn{
  position: absolute;
  top: 0;
  right: 0;
}
.filterOptionBox{
  width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: absolute;z-index: 10;
}
.filterOptionBox_inpBox{
  position: relative;
  width: 408px;
  margin: 150px auto;
  padding: 50px 50px 10px 0;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px gray;
}
.rightMiniCard{
  font-size: 14px;color: #5C657E; border: 1px solid #d0d0d0;margin: 10px;padding: 5px 15px 15px 15px;border-radius: 5px
}
.rightMiniCard>div{
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #d0d0d0;
}
.rightMiniCard>div>span:last-child{
  float: right;
}
.rightMiniCard li{
  height: 25px;
  line-height: 25px;
  text-indent: 0.5em;
  border-radius: 5px;
  text-align: left;
  background-color: lightgray;
  display:-webkit-box;/*设置为弹性盒子*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*显示省略号*/
  -webkit-line-clamp:1;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all;/*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
}
.rightMiniCard li:hover{
  background-color: #5C657E;
  color: white;
}
/*.triangle{*/
/*  width: 0px;*/
/*  height: 0px;*/
/*  border-width: 10px;*/
/*  border-style: solid;*/
/*  border-color: transparent transparent #eeeeee transparent;*/
/*  position: absolute;*/
/*  top: -20px;*/
/*  left: 30px;*/
/*}*/
.UserInfoRemindBox{
  text-align: center;
  width: 120px;
  height: 100px;
  border-radius: 10px;
}
.fullUserInfo{
  position: absolute;
}
.userHead{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.topBox{
  width: 1200px;
  height: 50px;
  margin: 0 auto;
  display: flex;
}
.webTitle{
  background-image: url("https://www.enwayouli.top/img/enwayouli.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50px;
  flex: 2;
}
.searchInput{
  flex: 4;
}
.navigation{
  flex: 4;
}
.searchInput>div{
  width: 100%;
  height: 40px;
  display: inline-block;
  margin-top: 5px;
  margin-left: 20px;
}
.searchInput input{
  width: 80%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid #fff;
  outline: none;
  font-size: 16px;
  color: gray;
  text-indent: 0.5em;
}
.searchInput input:focus{
  border: 1px solid #009688;
}

.topOption{
  color: #000;
  font-weight: bolder;
  text-decoration: none;
}
.topOption:hover{
  color: #009688;
}

.top{
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255,0.8);
}
.cont{
  width: 1200px;
  height: calc(100% - 50px);
  margin: 0 auto;
  display: flex;
}
.cont>div{
  height: calc(100% - 10px);
  border-radius: 5px;
  margin: 5px;
  /*background-color: rgba(0, 0, 0, .5);*/

  /*box-shadow: 0 0 1px;*/
  border: 1px solid #dbdbdb;
}
.left{
  flex: 2;
  background-color: white;
  opacity: 0.8;
  /*background-color: rgba(255,255,255,0.8) ;*/
}
.mid{
  flex: 7;
  overflow-y: scroll;
  /*opacity: 0.8;*/
  background-color: rgba(255,255,255,0.8) ;
}
.right{
  flex: 2;
  /*opacity: 0.8;*/
  background-color: rgba(255,255,255,0.8) ;
}
.mid::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 1px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.mid::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 1px;
  background-color: #009688;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.mid::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #fff;
  border-radius: 1px;
}
</style>
